<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>
        /*
            浏览器默认字体大小为:16px
        */
        .c1{
            /*font-size: 16px;*/
        }
        .c2{
            font-size: 32px;
            font-family: '楷体';
        }
        .c3{
            /*
                 em:根据父元素的字体大小决定当前字体大小
                2em表示父元素字体的2倍
                由于父元素是c2,其字体大小为32px
                因此0.5em=0.5*32=16px
            */
            font-size: 0.5em;
        }
        /*
            rem:根据浏览器默认字体大小决定当前字体大小
            2rem表示浏览器字体大小的2倍
            2rem=2*16=32px
        */
        .c4{
            font-size: 2rem;
            font-weight: bold;
            font-style: italic;
            font-family: '宋体';
        }
        .c5{
            font: italic bold 32px '宋体';
        }
    </style>
</head>
<body>
<div class="c1">第1个div</div>
<div class="c2">
    第2个div
    <div class="c3">第3个div</div>
    <div class="c4">第4个div</div>
</div>
<div class="c5">第5个div</div>
</body>
</html>